<template>
  <div class="dialog_info">
    <div class="dialog_info_title">
      <div class="dialogTab ">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == item.ind }"
          class="tabTit"
          @click="changeDig(item)"
        >
          {{ item.name }}
        </span>
      </div>
      <div v-show="selectNum == 0" class="water-table">
        <template v-if="isJCYJ&&selectNum == 0">
          <rainInfo />
        </template>
        <template v-else-if="!isJCYJ&&selectNum == 0">
          <FloodAnalysisInfo />
        </template>
      </div>
      <div v-show="selectNum == 1"  class="water-table">
        <radarinfo :selectflg="selectNum==1" />
      </div>
      <div v-show="selectNum == 2" class="water-table">
        <VillageDetails />
      </div>
      <div v-show="selectNum == 3" class="water-table">
        <addressList />
      </div>
      <div
        v-show="selectNum == 4"
        v-loading="proteloading"
        class="water-table"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.3)"
      >
        <template v-if="ProtectionData.length>0">
          <div class="timeline">
            <div v-for="(item, index) in ProtectionData" :key="index" class="timelineList">
              <div class="timeline_left">
                <div class="timeline_title">{{ item.warnState }}</div>
                <div>{{ $moment(item.tm).format("YYYY-MM-DD HH:mm") }}</div>
              </div>
              <div class="timeline_right">
                <div>{{ item.ewInfo1 }}{{ item.ewInfo2 }}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div v-show="!proteloading" class="noData">暂无数据</div>
        </template>

      </div>
    </div>
  </div>
</template>
<script>
import FloodAnalysisInfo from '@/views/main/prediction/ShortPro/FloodAnalysisInfo'
import VillageDetails from './VillageDetails.vue'
import rainInfo from './rainInfo.vue'
import addressList from './addressList.vue'

import {
    GetEarlyWarningProcess
} from '@/api/zyx.js'
export default {
    components: {
        FloodAnalysisInfo,
        VillageDetails,
        rainInfo,
        addressList,
        'radarinfo': () => import('@/views/components/radarinfo.vue'),
    },
    data() {
        return {
            selectNum: '',
            tabTitList: [
              {'name':'洪水分析','ind':'0'},
              {'name':'村庄详情','ind':'1'},
              {'name':'通讯录','ind':'2'}], // '预警过程'
             // '洪水分析', '村庄详情', '通讯录'
            tabsName: '洪水分析',
            ProtectionData: [],
            parameter: {},
            tab2: false,
            tab3: false,
            tab4: false,
            isJCYJ: false,
            proteloading: false
        }
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.params
        this.isJCYJ = this.parameter.isJCYJ;
        console.log(this.parameter)
        if (this.isJCYJ) {
           // this.tabTitList = ['实雨情', '雷达实测降雨过程','村庄详情', '通讯录'] // '预警过程'
           this.tabTitList = [ 
              {'name':'实时雨情','ind':'0'},
              {'name':'雷达实测降雨过程','ind':'1'},
              {'name':'村庄详情','ind':'2'},
              {'name':'通讯录','ind':'3'}
              ];
        } else {
           // this.tabTitList = ['洪水分析', '村庄详情', '通讯录'] // '预警过程'
           if(this.parameter.eventName == 'YJJC'){//监测预警 要雨量过程
              this.isJCYJ = true;
              this.tabTitList = [ 
              {'name':'雨量过程','ind':'0'}, 
              {'name':'村庄详情','ind':'2'},
              {'name':'通讯录','ind':'3'}
              ] 

           }else{
              this.tabTitList = [ 
              {'name':'洪水分析','ind':'0'},
              {'name':'村庄详情','ind':'2'},
              {'name':'通讯录','ind':'3'}
              ] 
           }
          
        }
        this.selectNum = this.tabTitList[0].ind;
       
    },
    methods: {
        changeDig(item) {
            let  inde = item.ind
            this.selectNum = inde;
            if (Number(inde) === 2) {
                if (!this.tab3) {
                    // this.GetEarlyWarningProcess()
                }
            } else if (Number(inde) === 4) {
                if (!this.tab4) {
                    this.GetEarlyWarningProcess()
                }
            }
        },
        GetEarlyWarningProcess() {
            this.proteloading = true
            const params = {
                Rvcd: this.parameter.Ewcode,
                dtTime: this.parameter.Ntm,
                sType: this.isJCYJ ? 1 : 2
            }
            GetEarlyWarningProcess(params).then((res) => {
                if (res.isSuccess) {
                    this.tab4 = true
                    this.ProtectionData = res.data
                }
                this.proteloading = false
            }).catch(err => {
                this.proteloading = false
            })
        }
    }
}
</script>
<style lang="less" scoped>
 .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
     height: 100%;
    min-height:78vh;
    padding-top:10px;
    box-sizing: border-box;
		.dialog_info_title {
			height: 100%;
			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	.water-table{
    height: calc(100% - 40px);
    padding:0px 20px;
    height: 700px;
	}
	.timeline {
		width: 100%;
		height: 97%;
		padding: 20px;
		overflow: auto;
		position: relative;
		color: #fff;

		.timelineList {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			margin-bottom: 10px;

			.timeline_left {
				width: 200px;
				padding-right: 20px;
				text-align: right;

				.timeline_title {
					font-size: 16px;
					font-weight: bold;
					color: #00e9ff;
				}
			}

			.timeline_right {
				position: relative;
				padding-left: 3%;
				width: calc(~"100% - 220px");
			}

			.timeline_right:after {
				content: "";
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background: #649ff4;
				box-shadow: 0 0 10px #3484f7;
				position: absolute;
				top: 0;
				left: -6px;
				z-index: 9;
			}
		}
	}

	.timeline::after {
		content: "";
		width: 3px;
		height: 100%;
		background: #1b1670;
		position: absolute;
		top: 0;
		left: 220px;
  }
  .noData{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0px;
  }
</style>
